<template>
	<view class="content-box">
		<image src="/static/img/bg1.png" mode="aspectFill"></image>
		<view class="login-box">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="账户" required name="username">
						<uni-easyinput type="text" v-model="valiFormData.username" placeholder="请输账户" />
					</uni-forms-item>
					<uni-forms-item label="密码" required name="password">
						<uni-easyinput type="password" v-model="valiFormData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button style="width: 280rpx;" type="default" @click="submit('valiForm')">登录</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 校验表单数据
				valiFormData: {
					username: '',
					password: '',
					introduction: '',
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						},]
					}
				},
			}
		},
		computed: {
			
		},
		onLoad() {},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `登录成功`
					})
					uni.switchTab({
						url:'/pages/Assets/Assets',
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
.content-box {
	height: 100vh;
	position: relative;
}
.content-box image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1; /* 确保图片在内容背后 */
}
.login-box {
	position: relative;
	top:30vh;
	z-index: 1; /* 确保内容在图片上方 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 40vh;
	font-size: 40rpx;
	font-weight: bold;
	color: #fff;
	margin:0 20rpx;
	border: 2rpx solid #1ee7e7;
	border-radius: 10rpx;
.example {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.login-title{
	padding-top: 20rpx;
}
.input-title{
	color: #ffff;
	font-size: 20rpx;
}
.uni-forms-item__label {
  color: white; /* 将颜色设置为白色 */
}
}
</style>